<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="/staticimg/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">

        window.onload = function (ev) {
            //name   cardid   password  repassword
            var pzhanghao = document.getElementById("pzhanghao");
            var pname = document.getElementById("pname");
            var ppassword = document.getElementById("ppassword");
            var ppassword1 = document.getElementById("ppassword1");
            var cardid = document.getElementById("cardid");
            var elementById = document.getElementById("sub_btn");
            var flag = true;


            var zhanghao1 = document.getElementById("zhanghao1");
            var name1 = document.getElementById("name1");
            var card1 = document.getElementById("card1");
            var pw = document.getElementById("pw");
            var pw1 = document.getElementById("pw1");

            var pzhanghao2 = null;
            var pname2 = null;
            var ppassword2 = null;
            var ppassword12 = null;
            var cardid2 = null;

            //当账号获取焦点时候，h5标签的东西失去
            pzhanghao.onfocus = function (ev1) {
                zhanghao1.innerHTML = "";
            }
            //账号的失去焦点事件
            pzhanghao.onblur = function (ev1) {
                pzhanghao2 = pzhanghao.value;
                // 帐号是否合法:允许5-16字节，允许字母数字下划线
                //^[a-zA-Z0-9_]{4,15}$
                //长度3-20所哟字符
                var reg = /^.{3,20}$/;
                var b = reg.test(pzhanghao2);
                if (!b) {
                    zhanghao1.innerHTML = "格式不正确"
                    zhanghao1.style.color = "red";
                    flag = false;
                } else {
                    zhanghao1.innerHTML = "";
                    flag = true;
                }
            }

            //当姓名获取焦点时候，h5标签的东西失去
            pname.onfocus = function (ev1) {
                name1.innerHTML = "";
            }

            //姓名的失去焦点事件
            pname.onblur = function (ev1) {
                pname2 = pname.value;
                // 帐号是否合法:允许5-16字节，允许字母数字下划线
                //^[a-zA-Z0-9_]{4,15}$
                //长度3-20所哟字符
                var reg = /^.{3,20}$/;
                var b = reg.test(pname2);
                if (!b) {
                    name1.innerHTML = "格式不正确"
                    name1.style.color = "red";
                    flag = false;
                } else {
                    name1.innerHTML = "";
                    flag = true;
                }
            }



            //当密码获取焦点时候，h5标签的东西失去
            ppassword.onfocus = function (ev1) {
                pw.innerHTML = "";
            }
            //密码的失去焦点事件
            ppassword.onblur = function (ev1) {
                ppassword2 = ppassword.value;
                // 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
                var reg1 = /^[a-zA-Z]\w{5,17}$/;
                var b = reg1.test(ppassword2);
                if (!b) {
                    pw.innerHTML = "格式不正确"
                    pw.style.color = "red";
                    flag = false;
                } else {
                    flag = true;
                }

            }

            //当确认密码获取焦点时候，h5标签的东西失去
            ppassword1.onfocus = function (ev1) {
                pw1.innerHTML = "";
            }
            //确认密码的失去焦点事件
            ppassword1.onblur = function (ev1) {
                ppassword12 = ppassword1.value;
                // 确认密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
                var reg1 = /^[a-zA-Z]\w{5,17}$/;
                var b = reg1.test(ppassword12);
                if (!b) {
                    pw1.innerHTML = "格式不正确"
                    pw1.style.color = "red";
                    flag = false;
                } else {
                    flag = true;
                }

            }

            //当身份证获取焦点时候，h5标签的东西失去
            cardid.onfocus = function (ev1) {
                card1.innerHTML = "";
            }
            //身份证的失去焦点事件
            cardid.onblur = function (ev1) {
                cardid2 = cardid.value;
                //E身份证
                var reg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                var b = reg2.test(cardid2);
                if (!b) {
                    card1.innerHTML = "格式不正确"
                    card1.style.color = "red";
                    flag = false;
                } else {
                    flag = true;
                }
            }

            //提交！！！
            elementById.onclick = function (ev2) {

                // if (pname2 == "" || ppassword2 == "" || pname2 == null || ppassword2 == null || ppassword12 == "" || ppassword12 == null) {
                //     alert("用户名或密码不能为空")
                //     return false;      //取消事件函数（事件行为），当点提交返回一个false时候，就代表取消form事件的提交
                // }
                // if (pzhanghao2 == "" || pzhanghao2 == null) {
                //     alert("账号不能为空")
                //     return false;      //取消事件函数（事件行为），当点提交返回一个false时候，就代表取消form事件的提交
                // }
                // if (cardid2 == "" || cardid2 == null) {
                //     alert("身份证不能为空")
                //     return false;      //取消事件函数（事件行为），当点提交返回一个false时候，就代表取消form事件的提交
                // }
                if (ppassword2 != ppassword12) {
                    alert("俩次输入的密码不同")
                    return false;      //取消事件函数（事件行为），当点提交返回一个false时候，就代表取消form事件的提交
                }
                //这里写一个这是因为全局看，只要有false就不提交
                return flag;
            }



            function foom(){
                if(flag){
                    alert("添加成功!正在进入展示页面。。。");
                }
            }
        }




        // 当元素的值发生改变时，会发生 change 事件。
        $(function () {
            $("#deptidid").change(function () {
                //1、获取被选中的value
                var did=$(this).val();
                if(did==-1){
                    alert("请选择部门");
                }else {
                    $.ajax({
                        url:"/getroles",
                        data:"did="+did,
                        type:"post",
                        dataType:"json",
                        success:function (rs) {    //rs用来接收返回的结果
                            ///让下拉框的长度为0，也就是rs的长度为0
                            $("#role")[0].length=0;
                            for(var i=0;i<rs.length;i++){
                                //此处是定位到这个add.jsp页面里的角色对象（var role= $("#role");），之后点出add方法，
                                //此处的[0]是因为add方法为js的方法，所以得把得到的jquery对象化为js对象，加个[0]就OK
                                // 为下拉框添加元素
                                //Option(显示到标签对中的值，value值)
                                $("#role")[0].add(new Option(rs[i].uname,rs[i].uid));

                            }
                        }
                    })
                }
            })
        })


        function out(){
            location.href="/getAllPerson";
        }


    </script>
</head>
<body>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h3 class="text-center text-success">
                人员新增页面
            </h3>
            <form role="form" action="/addPerson" method="post">

                <div class="form-group">
                    <label for="exampleInputEmail1">员工账号</label><input type="text" class="form-control" name="pzhanghao" id="pzhanghao" required/>
                </div>
                <h5 id="zhanghao1"></h5>
                <div class="form-group">
                    <label for="exampleInputPassword1">员工姓名</label><input type="text" class="form-control" name="pname" id="pname" required/>
                </div>
                <h5 id="name1"></h5>
                <div class="form-group">
                    <label for="exampleInputEmail1">所属部门</label>
                    <select class="span6 m-wrap" name="pdept" id="deptidid" style="width:178px;" >
                        <option value="-1">--选择分类--</option>
                        <#list dept as student>
                            <option value="${student.did}">${student.dname}</option>
                        </#list>
                    </select>
                </div>

                <div class="form-group">
                    <label for="exampleInputEmail1">选择职位</label>
                    <select class="span6 m-wrap" name="uid" id="role" style="width:178px;" >
                        <option value="-1">请选择</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="exampleInputPassword1">性别</label><input type="text" class="form-control" name="sex" id="sex" required/>
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">身份证号</label><input type="text" class="form-control" name="cardid" id="cardid" required/>
                </div>
                <h5 id="card1"></h5>
                <div class="form-group">
                    <label for="exampleInputPassword1">手机号</label><input type="text" class="form-control" name="pnumber" id="pnumber" required/>
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">QQ</label><input type="text" class="form-control" name="qq" id="qq" required/>
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">破壳日</label><input type="date" class="form-control" name="birthday" id="birthday" required/>
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">登陆密码</label><input type="text" class="form-control" name="ppassword" id="ppassword" required/>
                </div>
                <h5 id="pw"></h5>
                <div class="form-group">
                    <label for="exampleInputPassword1">确认密码</label><input type="text" class="form-control" name="ppassword1" id="ppassword1" required/>
                </div>
                <h5 id="pw1"></h5>
                <button type="submit" class="btn btn-default" onclick="foom()" id="sub_btn">提交</button>
                <button type="submit" class="btn btn-default" onclick="out()">返回</button>

            </form>
        </div>
    </div>
</div>


</body>
</html>